<template>
  <view class="personInfo">
    <view class="head">
      <image v-if="memberInfo?.avatar" :src="memberInfo.avatar" class="profile" />
      <image v-else src="@/static/images/mine/missing-face.png" class="profile" />
      <view>{{ memberInfo.nickname }}</view>
    </view>
    <view class="row flex_b mt24" @click="toAgreement">
      <view>用户协议</view>
      <up-icon name="arrow-right" color="#222222" size="16"></up-icon>
    </view>
    <view class="row flex_b" @click="toStandard">
      <view>用户行为规范</view>
      <up-icon name="arrow-right" color="#222222" size="16"></up-icon>
    </view>
    <view class="logout flex_c mt24" @click="logout">退出登录</view>
  </view>
</template>

<script setup lang="ts">
import { useMemberStore } from '@/stores';
const { memberInfo, clearUserInfo } = useMemberStore()

// 用户协议
const toAgreement = () => {
  uni.navigateTo({
    url: '/pages/public/agreement/agreement'
  })
}
// 用户行为规范
const toStandard = () => {
    uni.navigateTo({
        url: '/pages/public/standard/standard'
    })
}
// 退出登录
const logout = () => {
  uni.showModal({
    title: '提示',
    content: '确定退出登录？',
    success: (res) => {
      if (res.confirm) {
        clearUserInfo()
        uni.reLaunch({
          url: '/pages/index/index'
        })
      }
    }
  })
}

</script>

<style lang="scss" scoped>
.personInfo {
  min-height: 100vh;
  overflow: hidden;
  background: #f8f8f8;
}

.head {
  width: 750rpx;
  height: 260rpx;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding-left: 24rpx;
  box-sizing: border-box;

  .profile {
    width: 144rpx;
    height: 144rpx;
    border-radius: 50%;
    margin-right: 24rpx;
  }
}
.row{
  width: 100%;
  height: 90rpx;
  background-color: #fff;
  border-bottom: 2rpx solid #f8f8f8;
  color: #222222;
  padding: 0 24rpx;
  box-sizing: border-box;
  line-height: 100rpx;
}
.logout {
  width: 100%;
  height: 90rpx;
  color: #ff3c2a;
  background-color: #fff;
  // margin-top: 24rpx;
}
</style>